<template>
  <el-affix :offset="30">
    <div class='index-nav-list'>
      <ul>
        <li v-for="item in navlist" :key="item.id" :class="[item.router === routersname? 'oklist' : '']" @click="listBtn(item.id,item.router, item.typeId)" >
          <i :class="[item.styles, 'ioc-list']" ></i>
          <span> {{item.name}} </span>
        </li>
      </ul>
    </div>
  </el-affix>
</template>

<script lang='ts'>
import { defineComponent, reactive, ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import UseLocalStorage from '../../tool/UseLocalStorage'

export default defineComponent({
  name: '',
  setup () {
    // 获取本地登录用户id
    const { localStorageId } = UseLocalStorage()
    // 获取路由参数
    const route = useRoute()
    const router = useRouter()   
    const routeRoutersRef = ref<any>(route.name)
    watch(() => route.name, () => {
      routeRoutersRef.value = route.name
    })
    const routersname = ref<any>(route.query.routers)
    // navlist
    const navlist = reactive<any[]>([
      {
        id: 0,
        styles: 'iconfont icon-tubiao302',
        name: '推荐',
        router: 'tuijian',
        typeId: '0'
      },
      {
        id: 1,
        styles: 'iconfont icon-vue',
        name: 'vue',
        router: 'vue',
        typeId: '1'
      },
      {
        id: 2,
        styles: 'iconfont icon-bxl-spring-boot',
        name: 'spring-boot',
        router: 'spring-boot',
        typeId: '2'
      },
      {
        id: 3,
        styles: 'iconfont icon-JS',
        name: 'JS',
        router: 'JS',
        typeId: '3'
      },
      {
        id: 4,
        styles: 'iconfont icon-java',
        name: 'JAVA',
        router: 'JAVA',
        typeId: '4'
      },
      {
        id: 5,
        styles: 'iconfont icon-react',
        name: 'react',
        router: 'react',
        typeId: '5'
      },
      {
        id: 6,
        styles: 'iconfont icon-dibudaohanglan-',
        name: '风景',
        router: 'fengjing',
        typeId: '6'
      },
      {
        id: 7,
        styles: 'iconfont icon-yinyue',
        name: '音乐',
        router: 'yinyue',
        typeId: '7'
      },
      {
        id: 8,
        styles: 'iconfont icon-13',
        name: '生活',
        router: 'shenghuo',
        typeId: '8'
      },
      {
        id: 9,
        styles: 'iconfont icon-shujuku',
        name: '数据库',
        router: 'shujuku',
        typeId: '9'
      }
    ])
    const oklistnumRef = ref<number>(0)
    
    const listBtn = (id: number, routers: string, typeID: string) => {
      // 更换class
      console.log(id)
      oklistnumRef.value = id
      // 跳转路由
      let name = routers
      if(name !== 'tuijian') {
        name = 'vue'
      }
      if(name === 'vue') {
        setTimeout(() => window.location.reload(), 50)
      }
      router.replace({
        name: name,
        query: {
          routers,
          userID: localStorageId,
          typeID
        }
      })
    }


    return {
      navlist,
      oklistnumRef,
      listBtn,
      routeRoutersRef,
      routersname
    }
  }
})
</script>

<style lang='scss' scoped>
.index-nav-list{
  // background-color: skyblue;
  width: 180px;
  ul{
    width: 100%;
    height: 100%;
    li{
      margin-bottom: 30px;
      cursor: pointer;
      font-size: 20px;
      padding: 2px 0px;
    }
  }
}
.oklist{
  color: skyblue !important;
  
}
.ioc-list{
  font-size: 25px;
  margin-right: 2px;
  margin-right: 30px;
}
</style>
